<template>
  <div class="">123</div>
</template>

<script lang="ts">
    import { defineComponent, reactive, ref, toRaw, unref } from 'vue';
    import { Checkbox, Form, Input, Row, Col, notification } from 'ant-design-vue';
    import { Button } from '/@/components/Button';
    import { useGlobSetting } from '/@/hooks/setting';
  import { userStore } from '/@/store/modules/user';

    export default defineComponent({
      name: 'Login',
      components: {
        [Checkbox.name]: Checkbox,
        [Form.name]: Form,
        [Form.Item.name]: Form.Item,
        [Input.name]: Input,
        [Input.Password.name]: Input.Password,
        AButton: Button,
        [Row.name]: Row,
        [Col.name]: Col,
      },
      setup() {
        const formRef = ref<any>(null);
        const autoLoginRef = ref(false);

        const globSetting = useGlobSetting();

        const formData = reactive({
          account: 'vben',
          password: '123456',
        });

        const formState = reactive({
          loading: false,
        });

        const formRules = reactive({
          account: [{ required: true, message: '账号不能为空' }],
          password: [{ required: true, message: '请输入密码'，trigger: 'blur' }],
        });

        async function handleLogin() {
          const form = unref(formRef)
          if (!from) return;
          formState.loading = true
          try {
            const data = await form.validate();
            const userInfo = await userStore.login(
              toRaw({
                password: data.password,
                username: data.account
              })
            )
            if (userInfo) {
                notification.success({
                  message: '登录成功',
                  description: `欢迎回来： ${userInfo.realName}`
                })
            }
          } catch(error) {
          } finally {
            formState.loading = false
          }
        }
      },
    });
</script>
<style lang="less" scoped></style>
